<template>
    <div class="login">
        <!-- login_card -->
        <el-card class="login_card">
            <el-image class="logo_image" :src="logo_url" fit="cover"></el-image>
            <p class="login_title">登 录</p>
            <p class="login_desc">欢迎登录后台管理系统</p>
            <el-form ref="ruleForm" :model="form" :rules="rules">
                <el-form-item prop="username">
                    <el-input 
                        placeholder="请输入管理员账号"
                        v-model="form.username"
                        prefix-icon="el-icon-user"
                    />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        type="password"
                        placeholder="请输入管理员密码"
                        v-model="form.password"
                        prefix-icon="el-icon-lock"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button
                    :loading="loginLoading"
                    style="background: #5b89fe; color: white"
                    @click="submitForm('ruleForm')"
                    >登录</el-button>
            
                </el-form-item>
            </el-form>
        </el-card>
        <!-- 外部logo展示 -->
        <div></div>
        <!-- footer -->
        <p class="footer">Copyright ©  All Rights Reserved</p>
    </div>
</template>

<script>
export default {
    name: 'Login',
    components: {
        
    },
    data() {
        return {
            logo_url: require("@/assets/img/logo.png"),
            wechat_img: require("@/assets/img/wechat.png"),
            home_img: require("@/assets/img/home.png"),
            juejin_img: require("@/assets/img/juejin.jpg"),
            officalAccount_img: require("@/assets/img/officalAccount.jpg"),
            form: {
                username: "",
                password: "",
            },
            loginLoading: false,
            rules: {
                username: [
                    { required: true, message: "请输入管理员账号", trigger: "blur"},
                ],
                password: [
                    { required: true, message: "请输入管理员密码", trigger: "blur"},
                ]
            }
        }
    },
    created() {
        
    },
    mounted() {
        
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if(valid) {
                    //校验通过
                    this.loginLoading = true;
                    this.$axios
                        .post("auth/login", this.form)
                        .then((res) => {
                            if (res.data.success) {
                                sessionStorage.setItem("user",JSON.stringify(res.data.data.user));
                                sessionStorage.setItem("token", res.data.token);
                                this.$router.push("/home");
                            }else{
                                this.$message.error(res.data.msg);
                                this.loginLoading = false;
                            }
                        })
                        .catch((err) => {
                            this.$router.push("/home");
                            this.$message.error("服务器链接失败，请稍后重试......");
                            this.loginLoading = false;
                        })

                }else{
                    return false;
                }
            })
        }
    },
}
</script>

<style scoped>
.login {
    width: 100%;
    height: 100%;
    background-image: url("../assets/bg.jpg");
    position:absolute;
    left: 0;
    top: 0;
    background-size: 100% 100%;
}
.login_card {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 20%;
    min-width: 300px;
    height: 500px;
    min-height: 500px;
    border-radius: 10px;
    text-align: center;
}
.logo_image {
    width: 50px;
    height: 50px;
    margin-top: 40px;
}
.login_title {
    font-size: 25px;
    font-weight: bold;
}
.login_desc {
    letter-spacing: 2px;
    color: #999a9a;

}
.footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    margin: auto;
    text-align: center;
    color: rgba(148, 146, 146, 0.788);
}
.el-button {
  width: 100%;
}
</style>